/*
 * Copyright 2019 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


import * as React from "react";
import Scroll from "../scroll";

interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {

}

interface ImageState {

}

export default class Image extends React.Component<ImageProps, ImageState> {

    private image?: HTMLImageElement | null;

    public constructor(props: Readonly<ImageProps>, context) {
        super(props);
        this.handleWindowScroll = this.handleWindowScroll.bind(this);
    }

    public componentDidMount(): void {
        console.log("bind scroll");
    }

    public componentWillUnmount() {
        console.log("un");
    }

    public render() {


        return (
            <Scroll.Context.Consumer>
                {this.consumerRender.bind(this)}
            </Scroll.Context.Consumer>
        );
    }

    private handleWindowScroll(e) {
        const {image} = this;
        if (image) {
            console.log(image.scrollTop, e.target.scrollTop);
        }
    }

    private consumerRender(value) {
        value.addScrollEventListener(this.handleWindowScroll);
        const {alt, ...restProps} = this.props;
        return <img {...restProps} alt={alt} ref={instance => this.image = instance}/>;
    }
}
